<template>
	<view>
		<button @click="goToConnectPage()">连接打印机</button>
		<button @click="printLabel()">打印测试</button>


		<!-- 钉钉使用的 canvas -->
		<canvas v-if="platform === 'DingTalk'" id="dingtalkCanvas" canvas-id="dingtalkCanvas" ref="dingtalkCanvas"
			:width="canvasWidthResponsive" :height="canvasHeightResponsive"></canvas>

		<!-- 微信和飞书使用的 canvas -->
		<canvas v-else-if="platform === 'WeChat' || platform === 'FeiShu'" ref="wechatFeishuCanvas"
			canvas-id="wechatFeishuCanvas" :style="{
                  width: canvasWidthResponsive + 'px',
                  height: canvasHeightResponsive + 'px'
                }"></canvas>
	</view>
</template>

<script>
	import {
		usePrint
	} from '@/utils/print';
	import {
		nextTick
	} from "@vue/composition-api";

	const {
		startJob,
		startDrawLabel,
		drawText,
		drawBarcode,
		drawQRCode,
		drawRectangle,
		drawLine,
		drawImage,
		endDrawLabel,
		print,
		didReadPrintCountInfo,
		didReadPrintErrorInfo,
		getMultiple,
		getSn,
		setPlatform
	} = usePrint();
	export default {


		data() {
			return {
				imageSrc: "",
				canvasWidth: 200,
				canvasHeight: 200,
				quantity: 1,
				printed: 0,
				platform: null
			}
		},
		computed: {
			// 响应式宽高
			canvasWidthResponsive() {
				return this.canvasWidth;
			},
			canvasHeightResponsive() {
				return this.canvasHeight;
			},

		},
		created() {
			this.setPlatform()
		},

		methods: {
			setPlatform() {
				uni.getSystemInfo({
					success: (res) => {
						console.log("res.hostName", res.hostName)
						switch (res.hostName) {
							case 'WeChat':
							case 'wxwork':
								setPlatform('微信');
								this.platform = 'WeChat';
								break;
							case 'DingTalk':
								setPlatform('钉钉');
								this.platform = 'DingTalk';
								break;
							case 'Feishu':
								setPlatform('飞书');
								this.platform = 'FeiShu';
								break;
							default:
								console.log('未识别的平台');
						}
						console.log('platform', this.platform)
					},
				});


			},
			goToConnectPage() {

				uni.navigateTo({
					url: '../index/index'
				});
			},


			printLabel() {
				let connectStatus = 0;
				getSn((res) => {
					console.log('--------sn', res)
					if (res.code === -4) {
						connectStatus = -4;
					}

					if (connectStatus === -4) {
						uni.showToast({
							title: '打印机未连接',
							icon: 'none'
						});
						return;
					}

					this.printed = 0
					uni.showToast({
						title: '开始打印'
					});

					didReadPrintCountInfo((res) => {
						// console.log('打印成功回调',res.count);
					});

					didReadPrintErrorInfo((res) => {
						console.log(res.errCode);
					});
					// this.starPrint();

					startJob(1, 3, this.quantity, () => {
						this.starPrint();
					});
				});


			},

			async starPrint() {
				this.printed += 1
				//标签尺寸
				const labelWidth = 50
				const labelHeight = 70

				//B3S/B1/B21/B203/K3/K3W的multiple传8，B32/Z401/M2的multiple传11.81
				const multiple = 8
				this.canvasWidth = labelWidth * multiple
				this.canvasHeight = labelHeight * multiple
				await nextTick()
				console.log('开始绘制', this.platform);
				let canvasId = '';

				if (this.platform === 'DingTalk') {
					canvasId = 'dingtalkCanvas';
				} else if (this.platform === 'WeChat' || this.platform === 'FeiShu') {
					canvasId = 'wechatFeishuCanvas';
				}
				const ctx = uni.createCanvasContext(canvasId);
				console.log('ctx', ctx)
				ctx.setFillStyle('white');
				ctx.fillRect(2, 0, 800, 880);

				ctx.draw(false, () => {
					console.log('绘制完成drawQRCode33');
					startDrawLabel(canvasId, this.$refs, labelWidth, labelHeight, 0)
					// drawQRCode('不辞青山，相随与共 !', 2, 2, 30, 30, 0, 2);
					drawImage('../../static/logo.png', 2, 2, 30, 30, 0);
					// drawText("156", 12, 40, 8, 3, 0)
					endDrawLabel(() => {
						print(1, () => {
							if (this.quantity > this.printed) {
								this.starPrint();
							}
						})
					});
				});
			}
		}
	}
</script>

<style>
	/* 将canvas元素置于屏幕左侧 */
	canvas {
		/* 将canvas的左边缘定位到屏幕宽度的100%处，使其完全超出屏幕左侧显示区域 */
		position: absolute;
		left: 100%;
		width: 100%;
		height: 100%;
	}
</style>